<template>
	<div class="cart">
		<h4>全部商品</h4>
		<div class="cart-main">
			<div class="cart-th">
				<div class="cart-th1">全部</div>
				<div class="cart-th2">商品</div>
				<div class="cart-th3">单价（元）</div>
				<div class="cart-th4">数量</div>
				<div class="cart-th5">小计（元）</div>
				<div class="cart-th6">操作</div>
			</div>
			<div class="cart-body">
				<ul class="cart-list" v-for="cart in cartInfoList" :key="cart.id">
					<li class="cart-list-con1">
						<input
							type="checkbox"
							name="chk_list"
							:checked="cart.isChecked"
							@change="
								handleIsChangeCheck(cart.skuId, $event, cart.isChecked)
							" />
					</li>
					<li class="cart-list-con2">
						<img :src="cart.imgUrl" />
						<div class="item-msg">
							{{ cart.skuName }}
						</div>
					</li>
					<li class="cart-list-con4">
						<span class="price">{{ cart.cartPrice }}</span>
					</li>
					<li class="cart-list-con5">
						<!--handleNumCheck($event) 这里的是自定义函数  $event不是事件对象，而是接收子组件传过来的数据  -->
						<InputNumber
							:value="cart.skuNum"
							@input="handleSkuNumInput($event, cart.skuNum, cart.skuId)" />
					</li>
					<li class="cart-list-con6">
						<span class="sum">{{ cart.cartPrice * cart.skuNum }}</span>
					</li>
					<li class="cart-list-con7">
						<a class="sindelet" @click="delCart(cart.skuId)">删除</a>
						<br />
					</li>
				</ul>
			</div>
		</div>
		<div class="cart-tool">
			<div class="select-all">
				<input class="chooseAll" type="checkbox" v-model="allChecked" />
				<span>全选</span>
			</div>
			<div class="option">
				<a @click="batchDelCart">删除选中的商品</a>
			</div>
			<div class="money-box">
				<div class="chosed">
					已选择 <span>{{ isCheckNum }}</span
					>件商品
				</div>
				<div class="sumprice">
					<em>总价（不含运费） ：</em>
					<i class="summoney"></i>
				</div>
				<div class="sumbtn">
					<a class="sum-btn" @click="getTrade">结算</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import InputNumber from '@/components/InputNumber'
import debounce from 'lodash/debounce'

export default {
	name: 'ShopCart',
	components: {
		InputNumber,
	},

	async mounted() {
		// 调用actions获取购物车列表
		this.getCartInfoList()
	},
	methods: {
		// actions的获取购物车列表
		...mapActions('shopCart', [
			'getCartInfoList',
			'updateCartSkuNum',
			'updateCartChecked',
			'delCart',
			'batchDelCart',
			'batchCheckCart',
		]),

		
		getTrade() {
			this.batchDelCart()
			this.$router.push({
				name: 'Trade',
			})
		},

		// 更新购物车数量
		handleSkuNumInput: debounce(function (newSkuNum, oldSkuNum, skuId) {
			this.updateCartSkuNum({
				newSkuNum,
				oldSkuNum,
				skuId,
			})
		}, 500),
		// 更新商品选中状态
		handleIsChangeCheck: debounce(function (skuId, e, oldIsChecked) {
			// 获取单选框的最新值
			const isChecked = +e.target.checked
			if (isChecked === oldIsChecked) return
			this.updateCartChecked({ skuId, isChecked })
		}, 500),
	},
	computed: {
		// cartInfoList:[]
		...mapState('shopCart', ['cartInfoList']),

		// 商品全选状态
		allChecked: {
			// 页面渲染就会读取这个return 的值
			get() {
				return this.cartInfoList.every((cart) => cart.isChecked)
			},
			// 修改状态就会触发这里的set
			set: debounce(function (val) {
				const isChecked = +val
				this.batchCheckCart(isChecked)
			}, 500),
		},

		// 计算选中商品总数
		isCheckNum() {
			return this.cartInfoList.reduce((prev, cart) => {
				// 累加 上一次的值 加 (状态1吗？ 加该商品的数量 ： 状态为0就不加)
				return prev + (cart.isChecked ? cart.skuNum : 0)
			}, 0)
		},
		// 计算选中商品总价
		totalPrice() {
			return this.cartInfoList.reduce((prev, cart) => {
				return prev + (cart.isChecked ? cart.skuNum * cart.cartPrice : 0)
			})
		},
	},
}
</script>

<style lang="less" scoped>
.cart {
	width: 1200px;
	margin: 0 auto;
	h4 {
		margin: 9px 0;
		font-size: 14px;
		line-height: 21px;
	}
	.cart-main {
		.cart-th {
			background: #f5f5f5;
			border: 1px solid #ddd;
			padding: 10px;
			overflow: hidden;
			& > div {
				float: left;
			}
			.cart-th1 {
				width: 25%;
				input {
					vertical-align: middle;
				}
				span {
					vertical-align: middle;
				}
			}
			.cart-th2 {
				width: 25%;
			}
			.cart-th3,
			.cart-th4,
			.cart-th5,
			.cart-th6 {
				width: 12.5%;
			}
		}
		.cart-body {
			margin: 15px 0;
			border: 1px solid #ddd;
			.cart-list {
				padding: 10px;
				border-bottom: 1px solid #ddd;
				overflow: hidden;
				& > li {
					float: left;
				}
				.cart-list-con1 {
					width: 15%;
				}
				.cart-list-con2 {
					width: 35%;
					img {
						width: 82px;
						height: 82px;
						float: left;
					}
					.item-msg {
						float: left;
						width: 150px;
						margin: 0 10px;
						line-height: 18px;
					}
				}
				.cart-list-con4 {
					width: 10%;
				}
				.cart-list-con5 {
					width: 17%;
					.mins {
						border: 1px solid #ddd;
						border-right: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
						text-decoration: none;
					}
					input {
						border: 1px solid #ddd;
						width: 40px;
						height: 31px;
						float: left;
						text-align: center;
						font-size: 14px;
					}

					.plus {
						border: 1px solid #ddd;
						border-left: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
						text-decoration: none;
					}
				}

				.cart-list-con6 {
					width: 10%;

					.sum {
						font-size: 16px;
					}
				}

				.cart-list-con7 {
					width: 13%;

					a {
						color: #666;
					}
				}
			}
		}
	}
	.cart-tool {
		overflow: hidden;
		border: 1px solid #ddd;

		.select-all {
			padding: 10px;
			overflow: hidden;
			float: left;

			span {
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
			}
		}

		.option {
			padding: 10px;
			overflow: hidden;
			float: left;

			a {
				float: left;
				padding: 0 10px;
				color: #666;
			}
		}

		.money-box {
			float: right;

			.chosed {
				line-height: 26px;
				float: left;
				padding: 0 10px;
			}

			.sumprice {
				width: 200px;
				line-height: 22px;
				float: left;
				padding: 0 10px;

				.summoney {
					color: #c81623;
					font-size: 16px;
				}
			}

			.sumbtn {
				float: right;
				a {
					display: block;
					position: relative;
					width: 96px;
					height: 52px;
					line-height: 52px;
					color: #fff;
					text-align: center;
					font-size: 18px;
					font-family: 'Microsoft YaHei';
					background: #e1251b;
					overflow: hidden;
					text-decoration: none;
					&hover {
						color: white !important;
					}
				}
			}
		}
	}
}
</style>
